<template>
  <div>
<!--    <van-contact-card v-for="person in contactPerson" type="edit" :name="person.name" :tel="person.tel" :editable="false" />-->

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.audioName" :title="item.audioUrl" />
    </van-list>

    <van-panel v-for="item in orderList" :title="'订单号：'+item.orderId" :desc="item.beginDate" :status="item.price+'元'"></van-panel>
    <index></index>
  </div>

</template>

<script>
  import Vue from 'vue';
  import { ContactCard } from 'vant';
  import request from '@/utils/request'
  import { List } from 'vant';
  import { Cell } from 'vant';
  import { Panel } from 'vant';
  import Index from "./index/index";

  Vue.use(Panel);
  Vue.use(Cell);
  Vue.use(List);

  Vue.use(ContactCard);
export default {
  name: 'helloWorld',
  components: {Index},
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      lists: [1, 2, 3, 4, 5, 6],
      loading: false,
      finished: true,
      contactPerson:[
        {name:'张三', tel: '123123423423'},
        {name:'王二', tel: '123123423423'},
        {name:'李四', tel: '123123423423'},
        {name:'麻子', tel: '123123423423'},
        {name:'格鲁', tel: '123123423423'},
        {name:'归田', tel: '123123423423'},
        {name:'原子朗', tel: '123123423423'},
      ],
      list: [],
      orderList:[]
    }
  },
  created: function () {
    //页面加载即执行
    // this.startDoIt();
  },
  mounted()
  {
    request({
      url: '/order/customer/queryOrderList',
      method: 'get'
    }).then(res => {
      this.orderList= res
    });
  },
  methods:{
    // startDoIt() {
    //   axios.get('http://localhost:8787/jj/jiekou/getData')
    //       .then(res => {
    //         console.log(res.data.data);
    //         this.list = res.data.data;
    //       })
    // },
    // onLoad() {
    //   // 异步更新数据
    //   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   this.startDoIt();
    //   this.loading = false;
    //   this.finished = true;
    // }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-list-item;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
